<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>log-in</title>
    <link rel="stylesheet" href="./reset.css">
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="wrapper">
        <div class="h-ead">
            <ul class="h-left"><img src="./image/logo.jpg" alt=""></ul>
            <ul class="h-right"><span>学生信息管理系统</span></ul>
        </div>
        <div class="b-ody">
            <div class="b-lonin">
                <ul style="margin-top: 4%">
                    <span class="b-font"><b>平台登录</b></span>
                </ul>
                <ul>
                    <input type="text" placeholder="账号" class="b-input">
                </ul>
                <ul>
                    <input type="text" placeholder="密码" class="b-input">
                </ul>
                <ul>
                    <li class="b-yan" style="margin-left: 10%;width: 40%">
                        <input type="text" placeholder="验证码" class="b-yz1">
                    </li>
                    <li class="b-yan" style="margin-left: 5%;width: 45%">
                        <img src="./image/yanzhengma.gif" alt="#" class="b-yz2">
                    </li>
                </ul>
                <ul>
                    <button class="b-log"><b>登录</b></button>
                </ul>
            </div>
        </div>
        <div class="tail">
            <li class="t-ail"><span>德玛西亚万众一心</span></li>
        </div>
    </div>
</body>
<script>
    window.onload = function () {
        var inputs = document.querySelectorAll('input')
        //focus() 是指定 表单 input 元素 获取焦点
        inputs[0].focus()
        // onfocus() 适当用户选中input 是触发的焦点事件
        inputs[0].onfocus = function () {
            console.log('获取焦点')
        }

        for(var i = 0;i<inputs.length;i++){
            inputs[i].index = i
        }

        onkeyup = function (ev) {
            if(ev.key == 'Enter'){
                var next = 0
                for (var i = 0;i < inputs.length;i++){
                    if (inputs[i] == document.activeElement) {
                        next = inputs[i].index + 1
                    }
                }

                if(next == 3) next = 0
                inputs[next].focus()
            }
        }

        // inputs[0].onblur = function () {
        //     console.log('失去焦点')
        // }
        // inputs[0].onchange = function () {
        //     console.log('当文本内容发生改变的时候其失去焦点的时候触发' +
        //         '')
        // }

    }
</script>


</html>